<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>认证测试页面</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .section { margin: 20px 0; padding: 20px; border: 1px solid #ccc; }
        button { margin: 5px; padding: 10px; }
        textarea { width: 100%; height: 100px; }
        pre { background: #f5f5f5; padding: 10px; overflow: auto; }
    </style>
</head>
<body>
    <h1>认证信息测试</h1>
    
    <div class="section">
        <h2>1. 保存认证信息</h2>
        <p>用户标识: <input type="text" id="userIdentifier" value="test@example.com" /></p>
        <p>Cookies: <input type="text" id="cookies" value="sessionid=abc123; csrftoken=xyz789" /></p>
        <button onclick="saveAuth()">保存认证信息</button>
        <pre id="saveResult"></pre>
    </div>
    
    <div class="section">
        <h2>2. 获取认证信息</h2>
        <button onclick="getAuth()">获取认证信息</button>
        <pre id="getResult"></pre>
    </div>
    
    <div class="section">
        <h2>3. 获取平台列表(带认证状态)</h2>
        <button onclick="getPlatformsWithAuth()">获取平台列表</button>
        <pre id="platformsResult"></pre>
    </div>

    <script>
        async function saveAuth() {
            const userIdentifier = document.getElementById('userIdentifier').value;
            const cookies = document.getElementById('cookies').value;
            
            try {
                const response = await fetch('/api/platforms/1/auth', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        userIdentifier: userIdentifier,
                        cookies: cookies
                    })
                });
                
                const result = await response.json();
                document.getElementById('saveResult').textContent = JSON.stringify(result, null, 2);
            } catch (error) {
                document.getElementById('saveResult').textContent = 'Error: ' + error.message;
            }
        }
        
        async function getAuth() {
            try {
                const response = await fetch('/api/platforms/1/auth');
                const result = await response.json();
                document.getElementById('getResult').textContent = JSON.stringify(result, null, 2);
            } catch (error) {
                document.getElementById('getResult').textContent = 'Error: ' + error.message;
            }
        }
        
        async function getPlatformsWithAuth() {
            try {
                const platforms = await fetch('/api/platforms').then(res => res.json());
                
                const platformsWithAuth = await Promise.all(
                    platforms.map(async (platform) => {
                        try {
                            const authResponse = await fetch(`/api/platforms/${platform.id}/auth`);
                            const authList = await authResponse.json();
                            return {
                                ...platform,
                                hasAuth: authList && authList.length > 0,
                                authCount: authList ? authList.length : 0
                            };
                        } catch (error) {
                            return {
                                ...platform,
                                hasAuth: false,
                                authCount: 0
                            };
                        }
                    })
                );
                
                document.getElementById('platformsResult').textContent = JSON.stringify(platformsWithAuth, null, 2);
            } catch (error) {
                document.getElementById('platformsResult').textContent = 'Error: ' + error.message;
            }
        }
    </script>
</body>
</html>